<template>
  <div class="container">
    <h2>爆款产品</h2>
    <div class="container-img">
      <img class="imgs" src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20180405/20180405101609299910_original.jpg" alt="">
    </div>
    <div class="container-info">
      <ul>
        <li v-for="(list, index) of todata" :key="list.id" @click="open(list.id)">
          <div class="list">
            <img :src="list.homeImg" alt="">
            <p class="name">{{ list.homeName }}</p>
            <p class="info">{{ list.homeNametwo }}</p>
            <p class="price">￥{{ list.homePrice }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeContainer',
  props: {
    todata: Array
  },
  methods: {
    open: function(id){
      this.$router.push({'path': 'detail', query: { id: id }});
    }
  },


}
</script>

<style lang="less">
  .container{
    width: 100%;
    background: white;
    h2{
      line-height: 1rem;
      padding-left: .3rem;
      background: #eee;
      font-size: .4rem;
    }
    .container-img{
      border-bottom: 1px solid #eee;
      .imgs{
        width: 100%;
        height: 4rem;
      }
    }
    .container-info{
      width: 100%;
      display: flex;
      margin-bottom: 1.4rem;
      ul{
        width: 100%;
        li{
          list-style: none;
          width: 50%;
          float: left;
          .list{
            width: 100%;
            height: 4.6rem;
            float: left;
            text-align: center;
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;
            img{
              margin: 0.4rem 0 0.3rem 0;
              width: 2rem;
              height: 2.2rem;
            }
            .name{
              font-size: .3rem;
              font-weight: 600;
              margin-bottom: .2rem;
            }
            .info{
              font-size: .24rem;
              margin-bottom: .16rem;
            }
            .price{
              font-size: .3rem;
              color: red;
            }
          }
        }
      }
    }

  }
</style>
